import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getHotRecAction } from "../../store/actionCreatorgs";

import { RecommendWrapper } from "./style";
import ThemeHeader from "@/components/theme-header-rcm";
import SongsCover from "@/components/songs-cover";
export default memo(function () {
  const dispatch = useDispatch();
  const { recommend } = useSelector(
    (state) => ({
      recommend: state.getIn(["recommend", "hotRecommend"]),
    }),
    shallowEqual
  );
  useEffect(() => {
    dispatch(getHotRecAction(8));
  }, [dispatch]);
  return (
    <RecommendWrapper>
      <ThemeHeader
        title="热门推荐"
        keyword={["华语", "流行", "民谣", "摇滚", "电子"]}
      />
      <div className="recommend-list">
        {recommend.map((item, index) => {
          return <SongsCover info={item} key={index} />;
        })}
      </div>
    </RecommendWrapper>
  );
});
